<template>
	<view class="login">
		<u-navbar back-text="返回" title="会员登录" :is-back="false"></u-navbar>
		<view class="bg-white p-20">
			<u-form :model="form" ref="uForm" label-width="200" :border-bottom="true">
				<u-form-item label="登录帐号">
					<u-input v-model="form.account" placeholder="请输入邮箱或手机号" />
				</u-form-item>
				<u-form-item label="登录密码">
					<u-input v-model="form.password" type="password" placeholder="请输入登录密码" />
				</u-form-item>
			</u-form>
			<view class="flex mt-30 justify-center">
				<u-button type="success" @click="submit" class="ml-0 mr-20" style="display: inline-block;">登录帐号</u-button>
				<u-button type="primary" @click="submit" class="ml-20 mr-0" style="display: inline-block;">会员注册</u-button>
			</view>
			<view class="flex justify-center mt-50 ">
				<view class="bg-white p-20 line flex-1" style="position: relative;">
					
				</view>
			</view>
			<view class="flex justify-center py-30">
				<weixin-login/>
			</view>
		</view>
		<hd-tabbar></hd-tabbar>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';

	import WeixinLogin from './weixin/weixin.vue'

	export default {
		components: {
			WeixinLogin
		},
		data() {
			return {
				form: {
					account: 'admin@houdunren.com',
					password: 'admin888',
				},
			}
		},
		methods: {
			...mapActions('user', ['login']),
			submit() {
				if (this.form.account == '' || this.form.password == '') {
					return uni.showToast({
						title: '帐号或密码不能为空',
						duration: 2000
					})
				}
				this.login(this.form).then(_ => {
					this.$hd.initUserData()
					uni.showToast({
						title: '登录成功',
						duration: 2000
					})
					const url = uni.getStorageSync('redirect_route') || '/pages/index/index';
					uni.reLaunch({
						url
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	.login {
		.line {
			position: relative;
			display: flex;
			justify-content: center;
			&::before {
				content: '';
				border-bottom: solid 1px #ddd;
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: rgb(221, 221, 221);
				height: 1px;
				display: block;
				background: #ddd;
				width: 100%;
				position: absolute;
				top: 50%;
				left:0;
			}
			&::after{
				content:'其他登录方式';
				text-align: center;
				background-color: #fff;
				position: relative;
				padding: 0 20rpx;
			}
		}
	}
</style>
